<template>
  <div class="mychat">
    <van-nav-bar
      style="color: #222"
      title="在线咨询"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 底部选项卡 -->
    <div id="chart-container">
      <div class="chart-main-area">
        <div class="chart-main-title">
          <h1 id="userNumber" v-show="isshow"></h1>
            <!-- 在线聊天(<span id="userNumber"></span>人)~<span
              id="currentUser"
            ></span> -->

          
        </div>
        <div class="chart-list" id="chart-list"></div>
        <!-- <hr/> -->
       
      </div>
      
    </div>
     <div class="chart-form">
          <div class="input_box">
            <!-- 输入框 -->
            <input
              type="text"
              maxlength="60"
              class="chart-form-message"
              id="message"
            />
            <!-- 发送按钮 -->
            <input
              type="button"
              id="send"
              class="chart-form-send"
              value="发送"
            />
          </div>
        </div>
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: "consult",
      isshow:'true',
      uname:'小新',
      pic:''

      
    };
  },
  watch: {
    // selected(newVal) {
    //   if (newVal == "page") {
    //     this.$router.push("/");
    //   } else if (newVal == "service") {
    //     this.$router.push("/fymap");
    //   } else if (newVal == "consult") {
    //     this.$router.push("/mychat");
    //   } else if (newVal == "me") {
    //     this.$router.push("/mypage");
    //   }
    // },
  },
  mounted() {
    // 解析请求资源路径，获取name与avatar
    // let str = window.location.search;
    // if(!str){
    //     location='index.html'
    // }
    // let name = str.split('&')[0].split('=')[1];
    // let avatar = str.split('&')[1].split('=')[1];
    // name = decodeURI(name);  // 解码为正常中文
    // 更新页面中的头像与昵称
    // userinfo.innerHTML =
    //     `<img src="images/avatar/${avatar}" alt="">
    //     ${name}`;

    // 与服务端建立websocket连接
    let socket = io("ws://localhost:8081/");
    console.log(socket);

    // 连接建立成功后，直接开始监听服务端发过来的count_updated消息
    // socket.on("count_updated", (data) => {
    //   // 把data  更新到span中即可
    //   userNumber.innerHTML = data;
    // });
    let s1= setTimeout(() => {
      userNumber.innerHTML = `<a style="position: fixed;"> 欢迎来到我们的客服...</a>`;
      clearTimeout(s1);
    }, 1000);
    
    // 连接建立成功后，直接开始监听服务端发过来的textmsg消息
    socket.on("textmsg", (data) => {
      // console.log(data);
      // 构造一个聊天记录列表项div，追加到聊天记录列表
      let div = document.createElement("div");
      div.className = "chart-item";
      div.innerHTML = `
      <div style="margin-bottom:25px">
        <div class="user-face" style="padding-left:20px">
          <img src="http://www.zlllcy.com/img/avatar/18.jpg" style="width:50px" alt="">
        </div>
        <p style="font-size:0.9em; margin-left:20px">Robot</p>
        <div class="user-message" style="margin:-1em 80px; padding-right:20px;word-break: break-word;">${data}</div>
      </div>
                 `;
      // 把div追加到chart-list子元素的末尾位置
      let list = document.getElementById("chart-list");
      list.appendChild(div);

      // 将list元素的滚动条始终定位在最底部
      setTimeout(() => {
        list.scrollTop = list.scrollHeight;
      }, 200);
    });
    var __this = this;
    console.log(__this.pic,__this.uname)
    // 点击发送按钮，发消息
    send.addEventListener("click", function () {
      // 获取textarea中输入的文本
      let msg = document.getElementById("message").value;
      __this.isshow=""
      if (msg.trim() != "" && msg.length < 200) {
        socket.emit("textmsg", {
          content: msg,
        });
        
        // 构造一个聊天记录列表项div，追加到聊天记录列表
        let div = document.createElement("div");
        div.className = "chart-item";
        div.innerHTML = ` <div style="margin-bottom: 25px; margin-left: 85%;
        display: inline-block;">
            <div class="user-face" style="position: relative">
              <img src="${__this.pic?__this.pic:'http://www.zlllcy.com/img/avatar/2.jpg'}" style="width: 50px" alt="" />
            </div>
            <p style="font-size: 0.9em;  width:5em;margin-left:-10px;">${__this.uname}</p>
            <div class="user-message" style="margin: -1em -200px;  direction:rtl ;width:180px;word-break: break-word;">${msg}</div>
          </div>
                 `;
        // 把div追加到chart-list子元素的末尾位置
        let list = document.getElementById("chart-list");
        list.appendChild(div);

        // 将list元素的滚动条始终定位在最底部
        setTimeout(() => {
          list.scrollTop = list.scrollHeight;
        }, 60);

        document.getElementById("message").value = "";
      }
    });   
  },
  created() {
    this.chekepage();
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    chekepage(){
      if(this.$store.state.uid){
      this.axios
      .get(`/user/avatar?uid=${this.$store.state.uid}`)
      .then((result) => {
        // 获取用户名和用户图片 渲染到界面
        console.log(result);
        this.uname = result.data.results[0].uname;
        let pic = result.data.results[0].avator;
          this.pic=pic;
          console.log(pic)
    
        // console.log(this.uname, this.avator, this.text);
        // console.log(this.avator)
      });
    }
    }
  },
};
</script>

<style scoped>
/* 通过外层id标识，穿透设置css */
/* .mychat /deep/ .van-nav-bar__title {
  /* color: !important; */

.user-message {
  width: 100px;
  height: 30px;
  background-color: skyblue;

}

.user-face {
  /* border: 1px solid red; */
  width: 50px;
  /* text-indent:2em; */
}
.mychat {
  /* border: 1px solid rgb(92, 92, 92); */
  width: 100%;
  position: relative;
  box-sizing: border-box;
  
}
#chart-container,

/* 聊天框 （总框） */
chart-form {
  margin-top: 10px;
  
  width: 100%;
  border: none;
  height: 500px;
  background-color: rgb(224, 239, 245);
  padding-top: 10px;
}
/* 输入文字框 发送文字 */
.input_box {
  /* background-color: pink; */
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-around;
  padding: 0 10px;
  
}
/* 输入框 */
.chart-form-message {
  width: 100%;
  height: 30px;
  border: none;
  border-radius: 4px;
  border: 1px solid #c9c9c9;
  /* background-color: #f5f5f5; */
  /* background-color: pink; */
  text-indent: 1rem;
}
/* 发送按钮 */
.chart-form-send {
  height: 30px;
  width: 80px;
  border-radius: 8px;
  border: none;
  color: #fff;
  background-color: #6ab4ff;
}

.chart-list {
  width: 100vw;
  height: 70vh;
  /* border: 1px solid rgb(73, 73, 73); */
  /* overflow: hidden; */
  overflow-y: auto;
  /* background: #000; */
}

body {
  width: 99vw;
}
.chart-list-item {
  margin-left: 85%;
  display: inline-block;
  /* border: 1px solid red; */
  direction: rtl;
}
h1 {
  font-size: 15px;
  margin: 10px 0 0 10px;
  box-sizing: border-box;
}
</style>
